<template>
    <div>
        <el-row>
            <legend><h2><span class="mega-octicon octicon-mark-github"></span> GitHub文件浏览器</h2></legend>
        </el-row>
        <hr>
        <el-row :gutter="10">
            <el-col :span="10">
                <el-tooltip :manual="true" :value="tipVisible" effect="dark" content="仓库名不能为空" placement="bottom">
                    <el-input placeholder="请输入完整仓库名" v-model="fullRepoInput" icon="circle-cross"
                              @click="fullRepoInput=''">
                        <template slot="prepend">完整仓库名</template>
                    </el-input>
                </el-tooltip>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="changeRepo()">获取</el-button>
            </el-col>
        </el-row>
        <file-explorer :fullRepoName="fullRepoTransfer" ref="explorer"></file-explorer>
    </div>
</template>

<script>
    import FileExplorer from './FileExplorer.vue'

    export default {
        name: 'Github',
        data: function () {
            return {
                tipVisible: false,
                fullRepoTransfer: '',
                fullRepoInput: ''
            }
        },
        methods: {
            changeRepo: function () {
                if (!this.fullRepoInput) {
                    this.tipVisible = true;
                    return;
                }
                // 仓库没有变化时直接调用子组件的方法来重新加载
                if (this.fullRepoTransfer === this.fullRepoInput) {
                    this.$refs.explorer.changePath('/');
                    return;
                }
                this.fullRepoTransfer = this.fullRepoInput;
            }
        },
        components: {
            FileExplorer
        },
        watch: {
            fullRepoInput: function (nv, ov) {
                this.tipVisible = !nv && this.tipVisible;
            }
        }
    }
</script>